<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>账号管理</BreadcrumbItem>
      <BreadcrumbItem>账号列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        用户账号: <Input type="text"  clearable placeholder="请输入账号"  style="width: 120px" />
      </FormItem>

      <FormItem>
        用户邮箱: <Input type="text" clearable placeholder="请输入邮箱"  style="width: 120px" />
      </FormItem>
      <FormItem>
        <Button type="primary" v-hasPermission="['9']"  @click="$router.push('/accounts/addUser')" style="margin-right: 10px">添加账号</Button>
        <Button v-if="showDel"  v-hasPermission="['10']" style="margin-right: 10px" @click="alldel">批量删除</Button>
      </FormItem>
    </Form>
    <div >
      <Table :columns="columns1" :data="tableData" @on-selection-change="selectChange" :height="height" :loading="loading">
        <template slot-scope="{ row }" slot="status">
          <span  class="success" v-if="row.status==='1'">启用中</span >
          <span class="error" v-if="row.status==='2'">已被禁用</span >
        </template>

        <template slot-scope="{ row }" slot="user_count">
          <a href="javascript:void(0)" @click="viewSub(row)">{{row.user_count}}</a>
        </template>

        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="group_count">
          <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!=0"><span  style="color: #2db7f5;">{{row.group_count}}</span></router-link>
          <span v-else>{{row.group_count}}</span>
        </template>

        <template slot-scope="{ row }" slot="user_device_count">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
          <span v-else>{{row.user_device_count}}</span>
        </template>

        <!-- 机器 -->
        <template slot-scope="{ row }" slot="device_count">
          <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!=0"><span  style="color: #2db7f5;">{{row.device_count}}</span></router-link>
          <span v-else>{{row.device_count}}</span>
        </template>

        <template slot-scope="{ row }" slot="option">
          <Button type="primary" v-hasPermission="['11']"  size="small"   style="margin-right: 5px" @click="edit(row)">编辑</Button>
          <Button type="error" v-hasPermission="['10']"  size="small"  style="margin-right: 5px" @click="remove(row)">删除</Button>
          <Button class="button" size="small"  v-hasPermission="['11']" style="margin-right: 5px" :type="row.status == 2?'success':'error' " @click="setStatus(row)">
            <span v-if="row.status == 1">禁用</span>
            <span v-else>启用</span>
          </Button>
        </template>
      </Table>
    </div>

    <div style="display: flex;justify-content: center;margin-top: 24px;">
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
            show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
    </div>

    <Modal v-model="modal1" :title="form.id ? '编辑账号' : '添加账号'" :loading="modalLoading" :mask-closable="false"
           @on-ok="confirm" @on-cancel="cancel">
      <Form :model="form" :label-width="110">
        <FormItem label="密码">
          <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem label="当前角色"   v-hasPermission="['34']">
          <Select clearable v-model="form.role_id" placeholder="请选择" style="width: 120px;">
            <Option v-for="(item, index) in data1" :value="item.id" :key="index">{{item.title}}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal3" title="设置角色" @on-ok="confirm2" @on-cancel="cancel2" :mask-closable="false">
      <Form :label-width="110">
        <FormItem label="当前角色">
          <Select  v-model="user.role_id" placeholder="请选择" style="width: 120px;">
            <Option  :value="item.id"  v-for="(item, index) in data1" :key="index">{{item.title}}</Option>
          </Select>
        </FormItem>

      </Form>
    </Modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        width: this.$store.state.width,
        height: this.$store.state.height,
        showDel: false, //批量删除

        loading: false,
        request: {
          username: '',
          page: 1,
          loading:false
        },
        codeImg: '',
        modal2: false,
        modal3: false,
        columns1: [
          {
          width: 60,
          align: "center",
          type: 'selection'
        },
          {
            title: "账号",
            key: "username",
            minWidth: 100,
            align: "center"
          },
          {
            title: "邮箱",
            key: "email",
            minWidth: 250,
            align: "center"
          },
          {
            title: "状态",
            slot: "status",
            width: "150",
            align: "center"
          },
          {
            title: "操作",
            slot: "option",
            minWidth: 300,
            align: "center",
            fixed: 'right',
          }
        ],
        tableData: [],
        page: {},
        modalLoading: true,
        modal1: false,
        form: {
          id: null,
          // username: "",
          // email: ""
        },
        user: {
          id: '',
          role_id: ''
        },
        data1: [],
        selectID: [],
        content: '权限1;权限2;权限3;权限4;权限5;权限6;权限7;权限8'
      };
    },
    created() {
      this.lists();
      this.getUserlist();
    },
    methods: {
      alldel() {
        //批量删除
        this.$Modal.confirm({
          title: "确定要删除这些账号吗？",
          onOk: () => {
            // this.$Message.success("删除成功");
            this.axios.post("account/delAccount",{id:this.selectID}).then(res => {
              if(res.code == 1){
                this.$Message.success("删除成功");
                this.lists();
              }
            })

          },
          onCancel: () => {}
        });


      },
      selectChange(selection) {
        console.log('选项发生改变', selection)
        this.selectID = [];
        selection.forEach(item => {
          this.selectID.push(item.id)
        })

        if (this.selectID.length > 0) {
          this.showDel = true
        } else {
          this.showDel = false
        }

        console.log(this.selectID)


      },

      edituser(row) {
        console.log(row)
        this.user.id = row.id;
        this.user.role_id = row.role_id;

        console.log(this.user)

        this.modal3 = true;
      },
      confirm2() {
        console.log(this.user)
        this.axios.post("account/setAccRole",this.user).then(res => {
          if (res.code == 1) {
            this.modal3 = false;
            this.$Message.success("保存成功！");
            this.lists();
            this.cancel2();
          }
        });
      },
      cancel2() {
        this.user = {
          id: '',
          role_id: ''
        }
      },
      //所有账号
      getUserlist() {
        this.axios.get("du.ys-n.com/role/roleList",this.request).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.tableData = res.data.list;
            //this.page.count = res.data.count; // 总条数
            //this.page.curPage = res.data.curPage; // 当前页
            //this.page.countPage = res.data.countPage; // 总页数
          }
        });
      },

      viewSub(row) {
        console.log(row.id)
        this.$Message.success("id:", row.id);
        // this.$router.push('/master/index?account_id=' + row.id);
      },
      search() {
        this.request.page = 1;
        this.lists();
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.request.page = val;
        this.lists();
      },
      //账号列表
      lists() {
        this.loading = true;
        // console.log( JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id )
        // this.request.id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;
        this.axios.post("account/accountList",this.request).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.tableData = res.data.list;
            this.page.count = res.data.count; // 总条数
            this.page.curPage = res.data.curPage; // 当前页
            this.page.countPage = res.data.countPage; // 总页数
          }
        });

      },
      edit(row) {
        console.log(row)

        this.form.id = row.id;
        this.form.role_id = row.role_id;
        this.form.username = row.username;
        // this.form.email = row.email;
        this.modal1 = true;
      },
      confirm() {
        this.axios.post("account/accEdit",this.form).then(res => {
          this.modalLoading = false;
          if(res.code == 1){
            this.modal1 = false;
            this.$Message.success("保存成功！");
            this.lists();

            this.cancel();
          }
        })

      },
      remove(row) {

        this.selectID = [];
        this.selectID.push(row.id)

        this.$Modal.confirm({
          title: '确定要删除账号:“' +  row.username + '”吗？',
          onOk: () => {

            this.axios.post("account/delAccount",{id:this.selectID}).then(res => {
              if(res.code == 1){
                this.$Message.success("删除成功");
                this.lists();
              }
            })
          },
          onCancel: () => {}
        });
      },
      setStatus(row) {
        var text = "确定要" + (row.status == 2 ? "启用" : "禁用") + "账号:“" + row.username + "”吗？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.axios.post("account/accountStatus",{id:row.id,status:row.status ==1?2:1}).then(res => {
              if(res.code == 1){
                this.$Message.success("操作成功");
                this.lists();
              }
            })
          },
          onCancel: () => {}
        });
      },
      cancel() {
        this.form = {
          id: null,
          username: "",
          email: ""
        };
      }
    }
  };
</script>

<style scoped>
  .spec_item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .spec_item .input {
    width: 200px;
  }

  .spec_item button {
    margin-left: 10px;
  }
</style>
